<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
	import { ref } from 'vue'
	import type { DepartData } from '@/types/consult.d.ts'
	import { departmentListApi } from '@/apis/consult'

	// 索引
	const index = ref(0)

	const list = ref([] as DepartData[])

	const getDepartment = async () => {
		const res = await departmentListApi()
		// console.log(res)
		list.value = res
	}

	getDepartment()

	// 切换索引
	const changeIndex = (idx: number) => {
		index.value = idx
	}

	// 接收 url 中的参数
	const props = defineProps<{ type: string; illnessType: string }>()
</script>

<template>
	<view class="department-page">
		<scroll-view scroll-y class="department-primary">
			<view
				v-for="(item, i) in list"
				:key="item.id"
				class="department-item"
				:class="{ active: i === index }"
				@tap="changeIndex(i)"
				>{{ item.name }}</view
			>
			<!-- <view class="department-item">外科</view> -->
			<!-- <view class="department-item"></view> -->
		</scroll-view>
		<scroll-view class="department-secondary">
			<!-- 外层数组的 某一项的 child 属性
				list 默认是空数组
				list[0]拿到的是 undefined 他是点不出 child
				? 可选链操作符
			 -->
			<navigator
				v-for="item in list[index]?.child"
				:key="item.id"
				hover-class="none"
				:url="`/subpkg_consult/description/description?type=${type}&illnessType=${illnessType}&depId=${item.id}`"
				class="department-item"
			>
				{{ item.name }}
			</navigator>
		</scroll-view>
	</view>
</template>

<style lang="scss">
	@import './index.scss';
</style>
